<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-datatable .ui-datatable-header {
                text-align:right;
            }

            .actions td {
                border: 0px none !important;
                padding: 2px !important;
            }
        </style>

        <script type="text/javascript">
            function onEditComplete(xhr, status, args) {
                if(args.validationFailed || !args.loggedIn) {
                    jQuery('#dialog').effect("shake", { times:5 }, 100);
                    transfDialog.hide();
                } else {
                    if (args.fechar) {
                        transfDialog.hide();
                    } else {
                        transfDialog.show();
                    }
                    jQuery('#loginLink').fadeOut();
                }
            }
            
            function onEditCompleteTransf(xhr, status, args) {
                if(args.validationFailed || !args.loggedIn) {
                    jQuery('#dialog').effect("shake", { times:5 }, 100);
                    transfDialog.hide();
                } else {
                    if (args.fechar) {
                        transfDialog.hide();
                    } else {
                        transfDialog.show();
                    }
                    jQuery('#loginLink').fadeOut();
                }
            }
            
        </script>
    </ui:define>

    <ui:define name="content" id="content">
        <h:form id="frmCautela" prependId="false">
            <p:panel id="panel" header="Bem Vindo a Transferência de Ações - VENDAS">
                <!-- inicio -->
                <h:panelGrid id="display" columns="4" style="margin-bottom:50px" cellpadding="5">
                    <h:outputText value="Data da Venda:" />
                    <p:inputMask value="#{rateioTransferenciaBean.dataatual}" mask="99/99/9999" readonly="true" style="width:150px; font-weight:bold; text-align: center" />

                    <h:outputText value="Acionista Vendedor:" />
                    <h:panelGrid columns="2">
                        <p:inputText id="inCliente" value="#{rateioTransferenciaBean.cliente.nomCliente}" readonly="true" 
                                     style="width:400px; font-weight:bold;" />
                        <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar Acionista Cedente" onclick="clienteDialog.show()" process="@all" rendered="#{rateioTransferenciaBean.disable}" /> 
                    </h:panelGrid>
                    
                    <h:outputText value="Tipo de Transferência:" />
                    <p:inputText id="inTipo" value="#{rateioTransferenciaBean.selectedTipoTransferencia.dscTipo}" readonly="true" 
                                 required="true" style="width:200px; font-weight:bold;" />

                    <h:outputText value="Qde.Ações:" /> 
                    <h:outputText value="#{rateioTransferenciaBean.cliente.qdeAcao}" style="font-weight:bold; text-align: right">
                        <f:convertNumber locale="pt_BR" pattern="###,###,###" minFractionDigits="0" />
                    </h:outputText>

                    <h:outputText value="Qde. a Transferir:" />
                    <p:inputText id="totTrans" widgetVar="totTrans" value="#{rateioTransferenciaBean.totTrans}"
                                 onkeyup="javascript:maskIt(this,event,'###.###.###',true)" style="font-weight:bold; text-align: right">
                        <f:convertNumber locale="pt_BR" pattern="###,###,###" minFractionDigits="0" />
                    </p:inputText>

                    <h:outputText value="Valor Unitário:" />
                    <p:inputText id="vlrUnit" widgetVar="vlrUnit" value="#{rateioTransferenciaBean.vlrUnit}" style="width:100px; font-weight:bold; text-align: right;"
                                 onkeyup="javascript:maskIt(this,event,'###.###.###,##',true)">
                        <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                        <p:ajax event="blur" update="messages, vlrTotal, tabCliente" listener="#{rateioTransferenciaBean.somaTotal}"/>
                    </p:inputText>

                    <h:outputText value="Valor Total:" />
                    <p:inputText id="vlrTotal" widgetVar="vlrTotal" value="#{rateioTransferenciaBean.vlrTotal}" style="width:200px; font-weight:bold; text-align: right;"
                                 onkeyup="javascript:maskIt(this,event,'###.###.###,##',true)" readonly="true">
                        <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                    </p:inputText>
                    
                    <h:outputText value="" />
                    <h:outputText value="" />

                    <h:outputText value="Escolha dos Compradores:" rendered="#{rateioTransferenciaBean.disable}" />
                    <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar Cessionários" actionListener="#{rateioTransferenciaBean.verificaValorTransferencia}" 
                                     update="messages, panel, tabCliente" oncomplete="onEditCompleteTransf(xhr,status,args)" rendered="#{rateioTransferenciaBean.disable}" /> 

                    <h:outputText value="Recalcula Rateio:" rendered="#{rateioTransferenciaBean.disable}" />
                    <p:commandButton image="ui-icon ui-icon-search" title="Recalcular Rateio" actionListener="#{rateioTransferenciaBean.recalculaRateio}" 
                                     update="messages, panel, tabCliente" rendered="#{rateioTransferenciaBean.disable}" />

                    <f:facet name="footer">

                        <!-- GRID ESCOLHA TRANSFERENCIA -->
                        <p:dataTable id="tabCliente" widgetVar="wtabCliente" var="cliente" value="#{rateioTransferenciaBean.clienteList}" 
                                     paginator="true" rows="10" selection="#{rateioTransferenciaBean.selectedClientesCheck}"
                                     emptyMessage="Nenhum Comprador Selecionado ...">

                            <p:columnGroup type="header">
                                <p:row>
                                    <p:column colspan="10" headerText="GRID DAS ESCOLHAS DOS COMPRADORES" style="font-weight:bold;" />
                                </p:row>

                                <p:row>
                                    <p:column headerText="Recalculo" style="font-weight:bold; color: #000000;" />
                                    <p:column headerText="Razão Social\Nome" sortBy="#{cliente.nomCliente}" />
                                    <p:column headerText="% Participativo" sortBy="#{cliente.percPartic}" />
                                    <p:column headerText="Qde.Proposta" style="font-weight:bold; color: #000000;" sortBy="#{cliente.qdeProposta}" />
                                    <p:column headerText="Qde. Rateio" sortBy="#{cliente.qdeReceb}" />
                                    <p:column headerText="% Rateio" sortBy="#{cliente.qdePerc}" />
                                    <p:column headerText="Valor Rateio" sortBy="#{cliente.qdeVlr}" />
                                    <p:column headerText="Qde. p/Transferir" style="font-weight:bold; color: #000000;" sortBy="#{cliente.qdeFinal}" />
                                    <p:column headerText="% p/Transferir" style="font-weight:bold; color: #000000;" sortBy="#{cliente.qdePercFinal}" />
                                    <p:column headerText="Valor p/Transferir" style="font-weight:bold; color: #000000;" sortBy="#{cliente.qdeVlrFinal}" />
                                </p:row>
                            </p:columnGroup>

                            <p:column selectionMode="multiple" style="width:18px"/>

                            <p:column>
                                <h:outputText value="#{cliente.nomCliente}" />
                            </p:column>

                            <p:column style="width: 100px; text-align: right">
                                <h:outputText value="#{cliente.percPartic}">
                                    <f:convertNumber locale="pt_BR" pattern="###,##0.0000" minFractionDigits="4" />
                                </h:outputText>
                            </p:column>

                            <p:column style="font-weight:bold; width: 100px; text-align: right">
                                <h:outputText value="#{cliente.qdeProposta}">
                                    <f:convertNumber locale="pt_BR" pattern="########" minFractionDigits="0" />
                                </h:outputText>
                            </p:column>

                            <p:column style="width: 100px; text-align: right">
                                <h:outputText value="#{cliente.qdeReceb}">
                                    <f:convertNumber locale="pt_BR" pattern="########" minFractionDigits="0" />
                                </h:outputText>
                            </p:column>

                            <p:column style="width: 100px; text-align: right">
                                <h:outputText value="#{cliente.qdePerc}">
                                    <f:convertNumber locale="pt_BR" pattern="###,##0.0000" minFractionDigits="4" />
                                </h:outputText>
                            </p:column>

                            <p:column style="width: 100px; text-align: right">
                                <h:outputText value="#{cliente.qdeVlr}">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </h:outputText>
                            </p:column>

                            <p:column style="font-weight:bold; width: 100px; text-align: right">
                                <h:outputText value="#{cliente.qdeFinal}">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,###" minFractionDigits="0" />
                                </h:outputText>
                            </p:column>

                            <p:column style="font-weight:bold; width: 100px; text-align: right">
                                <h:outputText value="#{cliente.qdePercFinal}">
                                    <f:convertNumber locale="pt_BR" pattern="###,##0.0000" minFractionDigits="2" />
                                </h:outputText>
                            </p:column>

                            <p:column style="font-weight:bold; width: 100px; text-align: right">
                                <h:outputText value="#{cliente.qdeVlrFinal}">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </h:outputText>
                            </p:column>

                            <p:columnGroup type="footer">  
                                <p:row>  
                                    <p:column footerText="" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="Total:" style="text-align:right" />  
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotPartic()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotProposta()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotQdeRateio()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotPercRateio()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotVlrRateio()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotQdeFinal()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotPercFinal()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                    <p:column footerText="#{rateioTransferenciaBean.getcTotVlrFinal()}" style="font-weight:bold; color: #000000; width: 100px; text-align: right" />
                                </p:row> 
                            </p:columnGroup>
                        </p:dataTable>

                        <h:panelGrid id="displayButton" columns="5" style="margin-bottom:50px" cellpadding="5">
                            <p:outputPanel rendered="#{loginBean.disableButton}">
                                <p:commandButton id="btGravarTransferencia" value="Gravar Transferência" onclick="confirmationTransferenciaGravar.show()" type="button" rendered="#{rateioTransferenciaBean.disable}" />
                                <p:commandButton id="btExcluirTransferencia" value="Estornar Transferência" onclick="confirmationTransferencia.show()" type="button" rendered="#{!rateioTransferenciaBean.disable}" />
                            </p:outputPanel>
                        </h:panelGrid>
                    </f:facet>
                </h:panelGrid>
                <!-- ESCOLHA DOS CESSIONARIOS -->
                <p:dialog id="transfDialog" widgetVar="transfDialog" header="Escolha dos Cessionários" resizable="true"
                          width="1100" showEffect="explode" hideEffect="explode" position="'right',30">

                    <p:dataTable var="clienteTransf" value="#{rateioTransferenciaBean.lazyModel}" paginator="true" rows="15" 
                                 selection="#{rateioTransferenciaBean.clienteTrans}">

                        <p:columnGroup type="header">
                            <p:row>
                                <p:column colspan="6" headerText="DEFINIÇÃO DOS COMPRADORES" style="font-weight:bold;" />
                            </p:row>

                            <p:row>
                                <p:column headerText="Razão Social\Nome" sortBy="#{clienteTransf.nomCliente}" filterBy="#{clienteTransf.nomCliente}" />
                                <p:column headerText="% Participativo" sortBy="#{clienteTransf.percPartic}" />
                                <p:column headerText="Qde. Proposta" sortBy="#{clienteTransf.qdeProposta}" />
                                <p:column headerText="% Prosposta" sortBy="#{clienteTransf.qdePercProposta}" />
                                <p:column headerText="Valor Proposta" sortBy="#{clienteTransf.qdeVlrProposta}" />
                                <p:column headerText="Editar" />
                            </p:row>
                        </p:columnGroup>

                        <!--                        <p:column selectionMode="multiple" style="width:18px"/>  -->

                        <p:column>
                            <h:outputText value="#{clienteTransf.nomCliente}" />
                        </p:column>

                        <p:column style="width: 100px; text-align: right">
                            <h:outputText value="#{clienteTransf.percPartic}">
                                <f:convertNumber locale="pt_BR" pattern="###,##0.0000" minFractionDigits="4" />
                            </h:outputText>
                        </p:column>

                        <p:column style="width: 100px; text-align: right">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{clienteTransf.qdeProposta}">
                                        <f:convertNumber locale="pt_BR" pattern="###,###,###" minFractionDigits="0" />
                                    </h:outputText>
                                </f:facet>

                                <f:facet name="input">
                                    <p:inputText value="#{clienteTransf.qdeProposta}" onkeyup="javascript:maskIt(this,event,'###.###.###',true)" style="font-weight:bold; text-align: right">
                                        <f:convertNumber locale="pt_BR" pattern="###,###,###" minFractionDigits="0" />
                                    </p:inputText>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column style="width: 100px; text-align: right">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{clienteTransf.qdePercProposta}">
                                        <f:convertNumber locale="pt_BR" pattern="###,##0.0000" minFractionDigits="4" />
                                    </h:outputText>
                                </f:facet>

                                <f:facet name="input">
                                    <p:inputText value="#{clienteTransf.qdePercProposta}" onkeyup="javascript:maskIt(this,event,'###,####',true)" style="font-weight:bold; text-align: right">
                                        <f:convertNumber locale="pt_BR" pattern="###,##0.0000" minFractionDigits="4" />
                                    </p:inputText>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column style="width: 100px; text-align: right">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{clienteTransf.qdeVlrProposta}">
                                        <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                    </h:outputText>
                                </f:facet>

                                <f:facet name="input">
                                    <p:inputText value="#{clienteTransf.qdeVlrProposta}" onkeyup="javascript:maskIt(this,event,'###.###.###,##',true)" 
                                                 style="font-weight:bold; text-align: right">
                                        <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                    </p:inputText>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column>
                            <p:rowEditor />
                        </p:column>
                    </p:dataTable>

                    <p:commandButton value="Calcula Rateio" update="messages, panel, display, clienteTransf" process="@all" 
                                     actionListener="#{rateioTransferenciaBean.onEditRow}" oncomplete="transfDialog.hide()" />
                </p:dialog>
                <!-- PESQUISA TRANSFERENCIAS -->
                <p:dialog id="editalCliente" header="Pesquisa das Transferências" widgetVar="editalDialog" resizable="true"
                          width="800" showEffect="explode" hideEffect="explode" position="'right',30">

                    <p:dataTable id="tabEditalPesq" widgetVar="wtabEditalPesq" var="edital" 
                                 value="#{rateioTransferenciaBean.lazyModelEdital}" paginator="true" rows="10" lazy="true"
                                 selection="#{rateioTransferenciaBean.selectedCautela}" selectionMode="single"
                                 onRowSelectUpdate="messages, panel, display" onRowSelectComplete="editalDialog.hide()"
                                 rowSelectListener="#{rateioTransferenciaBean.onRecuperaEdital}" update="gridLivro">

                        <p:column headerText="Nome Acionista Cedente" sortBy="#{edital.idCliente.nomCliente}" filterBy="#{edital.idCliente.nomCliente}">
                            <h:outputText value="#{edital.idCliente.nomCliente}" />
                        </p:column>
                        
                        <p:column headerText="Nome Acionista Cessionário" sortBy="#{edital.cautelaAcionistaList.idCliente.nomCliente}" filterBy="#{edital.cautelaAcionistaList.idCliente.nomCliente}">
                            <h:outputText value="#{edital.cautelaAcionistaList.idCliente.nomCliente}" />
                        </p:column>

                        <p:column headerText="No. Transferência" sortBy="#{edital.numTransferencia}" filterBy="#{edital.numTransferencia}">
                            <h:outputText value="#{edital.numTransferencia}" />
                        </p:column>

                        <p:column headerText="Data Transferência" filterBy="#{edital.datCautela}" sortBy="#{edital.datCautela}" style="text-align: center;">
                            <h:outputText value="#{edital.datCautela}">
                                <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>

                    </p:dataTable>
                </p:dialog>
                <!-- PESQUISA ACIONISTA -->
                <p:dialog id="dialogCliente" header="Pesquisa dos Acionistas" widgetVar="clienteDialog" resizable="true"
                          width="800" showEffect="explode" hideEffect="explode" position="'right',30">

                    <p:dataTable id="tabClientePesq" widgetVar="wtabClientePesq" var="cliente" 
                                 value="#{clienteBean.lazyModel}" paginator="true" rows="10" lazy="true"
                                 selection="#{rateioTransferenciaBean.cliente}" selectionMode="single"
                                 onRowSelectUpdate="messages, panel, display" onRowSelectComplete="clienteDialog.hide()"
                                 rowSelectListener="#{rateioTransferenciaBean.onRowSelectNavigate}">

                        <f:facet name="header">
                            <div  style="text-align: center">
                                <h:outputText value="Selecione uma linha clique para Seleção" />
                            </div>
                        </f:facet>

                        <p:column headerText="Razão Social / Nome" sortBy="#{cliente.nomCliente}" filterBy="#{cliente.nomCliente}">
                            <h:outputText value="#{cliente.nomCliente}" />
                        </p:column>

                        <p:column headerText="C.N.P.J. / C.P.F." style="text-align: center;">
                            <h:outputText value="#{cliente.numCpf}">
                                <f:converter converterId="mascaraConverter" />
                                <f:attribute name="tipo" value="#{cliente.tipCliente}" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Tipo" sortBy="#{cliente.tipCliente}" filterBy="#{cliente.tipCliente}"  
                                  filterOptions="#{clienteBean.tipClienteOptions}" filterMatchMode="exact">
                            <h:outputText value="#{cliente.dscTipo}" />
                        </p:column>

                        <p:column headerText="Qde.Ações" style="text-align: right">
                            <h:outputText value="#{cliente.qdeAcao}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,###,###" minFractionDigits="0" />
                            </h:outputText>
                        </p:column>
                    </p:dataTable>
                </p:dialog>
                <!-- PESQUISA TIPO TRANSFERENCIA -->
                <p:dialog id="dialogTipo" header="Pesquisa dos Tipos de Transferencias" widgetVar="tipoDialog" resizable="true"
                          width="600" showEffect="explode" hideEffect="explode" position="'right',30">

                    <p:dataTable id="tabTipoTransferencia" widgetVar="wtabTipoTransferencia" var="tipoTransferencia" 
                                 value="#{tipoTransferenciaBean.lazyModel}" paginator="true" rows="5" lazy="true"
                                 selection="#{rateioTransferenciaBean.selectedTipoTransferencia}" selectionMode="single"
                                 onRowSelectComplete="tipoDialog.hide()" onRowSelectUpdate="messages, panel, display"
                                 rowSelectListener="#{rateioTransferenciaBean.onRowSelectNavigateTipoTransf}">

                        <f:facet name="header">
                            <div style="text-align: center">
                                Selecione uma linha e clique para Manutenção
                            </div>
                        </f:facet>

                        <p:column headerText="Descrição" sortBy="#{tipoTransferencia.dscTipo}" filterBy="#{tipoTransferencia.dscTipo}">
                            <h:outputText value="#{tipoTransferencia.dscTipo}" />
                        </p:column>
                    </p:dataTable>

                </p:dialog>
                <!-- CONFIRMA ESTORNO TRANSFERENCIA -->
                <p:confirmDialog message="Confirma o Estorno dessa Transferência?" showEffect="bounce" hideEffect="explode"
                                 header="Estorno Transferência" severity="alert" widgetVar="confirmationTransferencia">

                    <p:commandButton value="Sim" update="messages, panel, display" process="@all" oncomplete="onEditComplete(xhr,status,args),confirmationTransferencia.hide()"
                                     actionListener="#{rateioTransferenciaBean.excluirTransferencia}"  />
                    <p:commandButton value="Não" onclick="confirmationTransferencia.hide()" type="button" />
                </p:confirmDialog>
                <!-- CONFIRMA GRAVACAO TRANSFERENCIA -->
                <p:confirmDialog message="Confirma a Gravação dessa Transferência?" showEffect="bounce" hideEffect="explode"
                                 header="Gravar Transferência" severity="alert" widgetVar="confirmationTransferenciaGravar">

                    <p:commandButton value="Sim" update="messages, panel, display" process="@all" oncomplete="onEditComplete(xhr,status,args),confirmationTransferenciaGravar.hide()"
                                     actionListener="#{rateioTransferenciaBean.inserirTransferencia}"  />
                    <p:commandButton value="Não" onclick="confirmationTransferenciaGravar.hide()" type="button" />
                </p:confirmDialog>

                <h:inputHidden id="idCedente" value="#{rateioTransferenciaBean.cliente.idCliente}" />
                <h:inputHidden id="idTipo" value="#{rateioTransferenciaBean.selectedCautela.idCautela}" />
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>